<template>
  <div>
    <input type="text" :value="firstName" @input="changeFirstName" />
    <input type="text" :value="lastName" @input="changeLastName" />
    <input type="text" :value="modelValue" @input="changeDefaultName" />
    <input type="text" v-model="value">
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
interface EventData {
  target: {
    value: String | Number
  }
}
const props = defineProps({
  firstName: String,
  lastName: String,
  modelValue: String // modelValue 就是不带名字的默认v-model，触发修改用emit('update:modelValue)
})

const emits = defineEmits(['update:modelValue', 'update:firstName', 'update:lastName'])

const changeDefaultName = (val: EventData) => {
  emits('update:modelValue', val.target.value)
}
const changeFirstName = (val: EventData) => {
  emits('update:firstName', val.target.value)
}
const changeLastName = (val: EventData) => {
  emits('update:lastName', val.target.value)
}

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emits('update:modelValue', value)
  }
})
</script>

<style scoped>

</style>